@codemirror/lang-markdown

What is @codemirror/lang-markdown?

@codemirror/lang-markdown is a language support package for CodeMirror 6 that provides syntax highlighting, parsing, and other language features for Markdown. It allows developers to integrate Markdown editing capabilities into their CodeMirror-based editors.

What are @codemirror/lang-markdown's main functionalities?

Syntax Highlighting

This feature provides syntax highlighting for Markdown content. The code sample demonstrates how to set up a CodeMirror editor with Markdown syntax highlighting.

import { markdown } from '@codemirror/lang-markdown';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from 'codemirror';

const state = EditorState.create({
  doc: '# Hello, Markdown!',
  extensions: [basicSetup, markdown()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Markdown Parsing

This feature allows for parsing Markdown content within the editor. The code sample shows how to set up the editor and access the parsed Markdown document.

import { markdown } from '@codemirror/lang-markdown';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from 'codemirror';

const state = EditorState.create({
  doc: '# Hello, Markdown!',
  extensions: [basicSetup, markdown()]
});

const view = new EditorView({
  state,
  parent: document.body
});

// Accessing the parsed Markdown document
const parsedDoc = state.doc.toString();
console.log(parsedDoc);

Custom Markdown Extensions

This feature allows for the creation of custom Markdown extensions. The code sample demonstrates how to configure and use a custom Markdown language extension in the CodeMirror editor.

import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from 'codemirror';
import { LRLanguage, LanguageSupport } from '@codemirror/language';

const customMarkdown = markdownLanguage.configure({
  defineNodes: [{ name: 'CustomNode', style: 'custom-style' }],
  parseInline: [{ name: 'CustomInline', style: 'custom-inline-style' }]
});

const state = EditorState.create({
  doc: '# Hello, Custom Markdown!',
  extensions: [basicSetup, markdown({ base: customMarkdown })]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @codemirror/lang-markdown

markdown-it

markdown-it is a Markdown parser that offers fast and extensible parsing capabilities. Unlike @codemirror/lang-markdown, which is integrated into the CodeMirror editor, markdown-it is a standalone parser that can be used in various environments. It provides a plugin system for extending Markdown syntax.

remark

remark is a Markdown processor built on the unified framework. It provides a powerful plugin system for transforming and analyzing Markdown content. While @codemirror/lang-markdown focuses on integrating Markdown support into CodeMirror, remark is more versatile and can be used for a wide range of Markdown processing tasks.

showdown

showdown is a JavaScript Markdown to HTML converter. It is designed to be simple and easy to use, making it a good choice for converting Markdown content to HTML. Unlike @codemirror/lang-markdown, showdown does not provide editor integration but focuses on the conversion process.

README

@codemirror/lang-markdown

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements Markdown language support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

API Reference

markdown(config⁠?: Object = {}) → LanguageSupport

Markdown language support.

config

defaultCodeLanguage⁠?: Language

When given, this language will be used by default to parse code blocks.

codeLanguages⁠?: readonly LanguageDescription[]

A collection of language descriptions to search through for a matching language (with LanguageDescription.matchLanguageName) when a fenced code block has an info string.

addKeymap⁠?: boolean

Set this to false to disable installation of the Markdown keymap.

markdownLanguage: Language

Language support for Markdown/CommonMark.

insertNewlineContinueMarkup: StateCommand

This command, when invoked in Markdown context with cursor selection(s), will create a new line with the markup for blockquotes and lists that were active on the old line. If the cursor was directly after the end of the markup for the old line, trailing whitespace and list markers are removed from that line.

The command does nothing in non-Markdown context, so it should not be used as the only binding for Enter (even in a Markdown document, HTML and code regions might use a different language).

deleteMarkupBackward: StateCommand

This command will, when invoked in a Markdown context with the cursor directly after list or blockquote markup, delete one level of markup. When the markup is for a list, it will be replaced by spaces on the first invocation (a further invocation will delete the spaces), to make it easy to continue a list.

When not after Markdown block markup, this command will return false, so it is intended to be bound alongside other deletion commands, with a higher precedence than the more generic commands.

markdownKeymap: readonly KeyBinding[]

A small keymap with Markdown-specific bindings. Binds Enter to insertNewlineContinueMarkup and Backspace to deleteMarkupBackward.

Changelog

0.17.3 (2021-02-22)

New features

Include heading depth in style tags.